<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }"
                >首页</el-breadcrumb-item
            >
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片式图区域 -->
        <el-card>
            <!-- 搜索与添加区域 -->
            <el-row :gutter="10">
                <el-col :span="6">
                    <el-input
                        placeholder="请输入内容"
                        v-model="queryInfo.query"
                        clearable
                        @clear="getUserList"
                    >
                        <el-button
                            slot="append"
                            icon="el-icon-search"
                            @click="getUserList"
                        ></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="addDialogVisible = true"
                        >添加用户</el-button
                    >
                </el-col>
            </el-row>

            <!-- 用户列表表格 -->
            <el-table :data="userList" border stripe>
                <el-table-column type="index"> </el-table-column>
                <el-table-column prop="username" label="姓名">
                </el-table-column>
                <el-table-column prop="email" label="邮箱"> </el-table-column>
                <el-table-column prop="mobile" label="电话"> </el-table-column>
                <el-table-column prop="role_name" label="角色">
                </el-table-column>
                <!-- 状态 -->
                <el-table-column label="状态" width="150px">
                    <template slot-scope="scope">
                        <!-- {{scope.row}} 代表这一行的数据 -->
                        <el-switch
                            v-model="scope.row.mg_state"
                            @change="userStateChange(scope.row)"
                        >
                        </el-switch>
                    </template>
                </el-table-column>
                <!-- 操作 -->
                <el-table-column label="操作" width="180px">
                    <template slot-scope="scope">
                        <!-- 修改 -->
                        <el-button
                            size="mini"
                            type="primary"
                            icon="el-icon-edit"
                            @click="showEditDialog(scope.row.id)"
                        ></el-button>
                        <!-- 删除 -->
                        <el-button
                            size="mini"
                            type="danger"
                            icon="el-icon-delete"
                            @click="removeUserById(scope.row.id)"
                        ></el-button>
                        <!--  分配角色 -->
                        <el-tooltip
                            class="item"
                            effect="dark"
                            content="分配角色"
                            placement="top"
                            :enterable="false"
                        >
                            <el-button
                                size="mini"
                                type="warning"
                                icon="el-icon-setting"
                                @click="showSetRolesDiglog(scope.row)"
                            ></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页区域 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum"
                :page-sizes="[1, 2, 5, 10]"
                :page-size="queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </el-card>

        <!-- 添加用户--对话框 -->
        <!-- 添加关闭事件，关闭对话框的时候，清空表单内容 -->
        <el-dialog
            title="添加用户"
            :visible.sync="addDialogVisible"
            width="50%"
            @close="addDialogClosed"
        >
            <!-- 内容主体区域 -->
            <el-form
                :model="addForm"
                :rules="addFormRules"
                ref="addFormRef"
                label-width="70px"
            >
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="addForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="addForm.password"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="addForm.email"></el-input>
                </el-form-item>
                <el-form-item label="手机" prop="mobile">
                    <el-input v-model="addForm.mobile"></el-input>
                </el-form-item>
            </el-form>
            <!-- 底部区域 -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addUser">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 修改用户的对话框 -->
        <el-dialog
            title="修改用户"
            :visible.sync="editDialogVisible"
            width="50%"
            @close="editDialogClosed"
        >
            <el-form
                :model="editForm"
                :rules="editFormRules"
                ref="editFormRef"
                label-width="70px"
            >
                <el-form-item label="用户名">
                    <el-input
                        v-model="editForm.username"
                        :disabled="true"
                    ></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="editForm.email"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="mobile">
                    <el-input v-model="editForm.mobile"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editUserInfo"
                    >确 定</el-button
                >
            </span>
        </el-dialog>
        <!-- 给用户配置角色的对话框 -->
        <el-dialog
            title="分配角色"
            :visible.sync="setRoleDialogVisible"
            width="50%"
            @close="setRoleDialogClosed"
        >
            <div>
                <p>当前的用户：{{ userInfo.username }}</p>
                <p>当前的角色：{{ userInfo.role_name }}</p>
                <p>
                    分配新的角色：
                    <el-select
                        v-model="selectedRoleId"
                        placeholder="请选择角色"
                    >
                        <el-option
                            v-for="item in rolesList"
                            :key="item.id"
                            :label="item.roleName"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </p>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="setRoleDialogVisible = false"
                    >取 消</el-button
                >
                <el-button type="primary" @click="saveRoleInfo"
                    >确 定</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        // 验证邮箱的自定义规则
        var checkEmail = (rule, value, callback) => {
            // 验证邮箱的正则表达式
            const regEmail =
                /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/
            if (regEmail.test(value)) {
                // 验证通过
                return callback()
            } else {
                // 验证不通过，返回一个错误对象
                callback(new Error('请输入合法的邮箱'))
            }
        }
        // 验证手机号
        var checkMobile = (rule, value, callback) => {
            // 验证手机的正则表达式
            const regMobile = /^[1][3,4,5,7,8][0-9]{9}$/
            if (regMobile.test(value)) {
                // 验证通过
                return callback()
            } else {
                // 验证不通过，返回一个错误对象
                callback(new Error('请输入合法的手机号'))
            }
        }
        return {
            // 获取用户列表的参数对象
            queryInfo: {
                query: '',
                //当前的页数
                pagenum: 1,
                //当前每一页显示多少条数据
                pagesize: 2,
            },
            userList: [],
            total: 0,
            //对话框是否显示
            addDialogVisible: false,
            // 添加用户时的表单数据
            addForm: {
                username: '',
                password: '',
                email: '',
                mobile: '',
            },
            // 添加用户时的验证规则
            addFormRules: {
                // 验证用户名是否合法
                username: [
                    {
                        required: true,
                        message: '请输入登录名称',
                        trigger: 'blur',
                    },
                    {
                        min: 3,
                        max: 10,
                        message: '长度在 3 到 10 个字符',
                        trigger: 'blur',
                    },
                ],
                // 验证密码
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    {
                        min: 6,
                        max: 16,
                        message: '密码长度在 6 到 16 个字符',
                        trigger: 'blur',
                    },
                ],
                // 邮箱验证
                email: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    // 添加自定义规则
                    { validator: checkEmail, trigger: 'blur' },
                ],
                // 手机
                mobile: [
                    { required: true, message: '请输入手机', trigger: 'blur' },
                    //添加自定义的手机验证规则
                    { validator: checkMobile, trigger: 'blur' },
                ],
            },
            // 修改用户的对话框的显示与隐藏
            editDialogVisible: false,
            // 查询到的用户对象
            editForm: {},
            // 编辑窗口的验证规则
            editFormRules: {
                // 邮箱验证
                email: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    // 添加自定义规则
                    { validator: checkEmail, trigger: 'blur' },
                ],
                // 手机
                mobile: [
                    { required: true, message: '请输入手机', trigger: 'blur' },
                    //添加自定义的手机验证规则
                    { validator: checkMobile, trigger: 'blur' },
                ],
            },
            // 给用户配置角色的对话框，是否显示
            setRoleDialogVisible: false,
            // 存要配置角色的用户信息
            userInfo: {},
            // 存放所有角色的列表
            rolesList: [],
            // 在下拉框中，已选中的角色Id值
            selectedRoleId: '',
        }
    },
    created() {
        // 页面生产后立即调用请求获取 数据
        this.getUserList()
    },
    methods: {
        // 获取用户列表
        async getUserList() {
            const { data: res } = await this.$http.get('users', {
                params: this.queryInfo,
            })
            console.log(res)
            if (res.meta.status !== 200) {
                return this.$message.error('获取失败')
            }
            this.total = res.data.total
            this.userList = res.data.users
        },
        // 监听pageSize改变的事件
        handleSizeChange(newSize) {
            // console.log(newSize);
            this.queryInfo.pagesize = newSize
            // 重新发起请求
            this.getUserList()
        },
        // 监听 页码值 改变 的事件
        handleCurrentChange(newPage) {
            // console.log(newPage);
            this.queryInfo.pagenum = newPage
            this.getUserList()
        },
        // 监听状态开关的改变事件
        async userStateChange(userInfo) {
            // console.log(userInfo);
            // 发送请求，修改状态
            const { data: res } = await this.$http.put(
                `users/${userInfo.id}/state/${userInfo.mg_state}`
            )
            if (res.meta.status !== 200) {
                // 没有修改成功，那就在页面中恢复
                userInfo.mg_state = !userInfo.mg_state
                return this.$message.error('更新用户状态失败')
            }
            this.$message.success('更新用户状态成功！')
        },
        // 关闭添加用户的表单之后，清空表单内容
        addDialogClosed() {
            this.$refs.addFormRef.resetFields()
        },
        // 添加用户
        addUser() {
            this.$refs.addFormRef.validate(async (valid) => {
                if (!valid) {
                    return
                } else {
                    const { data: res } = await this.$http.post(
                        'users',
                        this.addForm
                    )
                    if (res.meta.status !== 201) {
                        this.$message.error('添加用户失败')
                    } else {
                        this.$message.success('添加用户成功')
                        // 关闭弹窗列表
                        this.addDialogVisible = false
                        // 刷新列表
                        this.getUserList()
                    }
                }
            })
        },
        // 弹出修改框
        async showEditDialog(id) {
            // console.log(id);
            const { data: res } = await this.$http.get('users/' + id)
            if (res.meta.status !== 200) {
                return this.$message.error('查询用户失败')
            }
            this.editForm = res.data
            this.editDialogVisible = true
        },
        // 重置修改的表单
        editDialogClosed() {
            this.$refs.editFormRef.resetFields()
        },
        // 提交修改请求
        editUserInfo() {
            this.$refs.editFormRef.validate(async (valid) => {
                if (!valid) {
                    return
                }
                // 发起请求
                const { data: res } = await this.$http.put(
                    'users/' + this.editForm.id,
                    {
                        email: this.editForm.email,
                        mobile: this.editForm.mobile,
                    }
                )
                if (res.meta.status !== 200) {
                    return this.$message.error('更新用户信息失败')
                }
                // 关闭 对话框
                this.editDialogVisible = false
                // 刷新数据
                this.getUserList()
                // 提示
                this.$message.success('更新用户信息成功')
            })
        },
        // 删除用户
        async removeUserById(id) {
            // console.log(id)
            // 弹框提示
            // catch捕获到错误，抛出给 confirmResult
            const confirmResult = await this.$confirm(
                '是否确定删除该用户吗?',
                '提示',
                {
                    confirmButtonText: '确定删除',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            ).catch((err) => err)

            // 如果用户确认删除，返回值为字符串'confirm'
            // 取消，返回值为 'cancel'
            // console.log(confirmResult)
            if (confirmResult == 'cancel') {
                return this.$message.info('已取消删除')
            } else if (confirmResult == 'confirm') {
                const { data: res } = await this.$http.delete('users/' + id)
                if (res.meta.status !== 200) {
                    return this.$message.error('删除用户失败')
                }
                // 刷新数据
                this.getUserList()
                // 提示
                this.$message.success('已完成删除用户')
            }
        },
        // 显示给用户配置角色的弹窗
        async showSetRolesDiglog(userInfo) {
            this.userInfo = userInfo
            // 获取所有的角色列表
            const { data: res } = await this.$http.get('roles')
            if (res.meta.status !== 200) {
                return this.$message.error('获取该用户的角色失败')
            }
            this.rolesList = res.data
            this.setRoleDialogVisible = true
        },
        // 点击确定，修改用户的角色
        async saveRoleInfo() {
            // 先判断是否选中了角色
            if (!this.selectedRoleId) {
                return this.$message.error({
                    content: '请选择要分配的角色',
                    duration: 1.5,
                })
            }
            const { data: res } = await this.$http.put(
                `users/${this.userInfo.id}/role`,
                {
                    rid: this.selectedRoleId,
                }
            )
            if (res.meta.status !== 200) {
                return this.$message.error('更新用户的角色失败')
            }
            this.$message.success('成功更新用户的角色')
            this.getUserList();
            this.setRoleDialogVisible = false
        },
        // 关闭对话框之后，清除相关数据
        setRoleDialogClosed(){
            this.selectedRoleId='';
            this.userInfo={};
        }
    },
}
</script>

<style lang="less" scoped>
</style>

